<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        div{
            width:100px;
            height:100px;
            background: red;
            position: absolute;
            top:0;
            left:0;
        }
    </style>
    <script>
        function Drag(id){
                this.obj = document.getElementById(id);
                this.disX = 0;
               this.disY = 0;
        }
         Drag.prototype.fn = function(){
                var self = this;

                 this.obj.onmousedown = function(ev){
                         var event = ev || window.event;
                        self.mouseDown(event);
                     }

                 return false;
             };

        Drag.prototype.mouseDown = function(ev){
                 var self = this;
                this.disX = event.clientX - this.obj.offsetLeft;
                this.disY = event.clientY - this.obj.offsetTop;

                 document.onmousemove = function(ev){
                        self.mouseMove();
                     }

                document.onmouseup = function(){
                        self.mouseUp();
                     }
           };
        Drag.prototype.mouseMove = function(){
               this.obj.style.left = (event.clientX - this.disX) + 'px';
               this.obj.style.top = (event.clientY - this.disY) + 'px';
             };

         Drag.prototype.mouseUp = function(){
                 document.onmousemove = null;
                 document.onmouseup = null;
             }
             window.onload=function(){
                var drag=new Drag("tab");
                 drag.fn();

             }
    </script>

</head>

<body>
<div id="tab"></div>

</body>
</html>